<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标hover特效</title>
    <style type="text/css">
        body {
            color: #fff;
            background: #000;
        }

        h1 {
            font-size: 14px;
            font-family: "Microsoft Yahei";
            text-align: center;
        }

        .change {
            display: block;
            width: 400px;
            height: 400px;
            background: url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center;
            background-size: cover;
            border: 1em solid rgba(255, 255, 255, .8);
            margin: 50px auto;
        }

        .change img {
            display: block;
            width: 300px;
            height: 284px;
            opacity: 0;
            -webkit-transform: translate(-100px, -100px);
            -webkit-transition: opacity 1s ease-in-out 0.5s, -webkit-transform 1s ease-in-out;
            transition: opacity 1s ease-in-out 0.5s, transform 1s ease-in-out;
        }

        .change:hover img {
            -webkit-transform: translate(0px, 0px);
            opacity: 1;
            -webkit-transition: opacity 1s ease-in-out, -webkit-transform 1s ease-in-out .1s;
            transition: opacity 1s ease-in-out, transform 1s ease-in-out .1s;
        }
    </style>
</head>
<body>
<h1>请使用webkit内核标准浏览器查看效果</h1>
<a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
    <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt=""/>
</a>
</body>
</html>